<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="结算单详情"  @leftClick="back" ></my-navbar>
		<!-- #endif -->
		<!-- 在线支付 -->
		<view class="content" v-if="type==1">
			<view class="flex-btw">
				<text class="prop">结算单号</text>
				<text>{{data.order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账期</text>
				<text>{{data.payment_days}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">结算方式</text>
				<text>{{data.pay_type==1? '线下':'差额'}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">原始单号</text>
				<text>{{data.related_order_order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">单据类型</text>
				<text>{{data.type==1?'订单':'退货单'}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">下单金额</text>
				<text style="color:#E84B4B">￥{{data.order_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">配送金额</text>
				<text style="color:#E84B4B">￥{{data.send_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账单号</text>
				<text>{{data.related_order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账单金额</text>
				<text style="color:#E84B4B">￥{{data.account_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">差异金额</text>
				<text style="color:#E84B4B">￥{{data.diff_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">制单人</text>
				<text>{{data.admin_uname}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">结算日期</text>
				<text>{{data.createdTime}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">备注</text>
				<text>{{data.remark}}</text>
			</view>
		</view>
		
	<!-- 货到付款 -->
		<view class="content" v-if="type==2">
			<view class="title">基本信息</view>
			<view class="flex-btw">
				<text class="prop">结算单号</text>
				<text>{{data.order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账期</text>
				<text>{{data.payment_days}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">付款方式</text>
				<text v-show="data.pay_type ==1">支付宝</text>
				<text v-show="data.pay_type ==2">微信</text>
				<text v-show="data.pay_type ==3">银行转账</text>
				<text v-show="data.pay_type ==4">现金</text>
			</view>
			<view class="flex-btw">
				<text class="prop">付款金额</text>
				<text style="color:#E84B4B">￥{{data.collect_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">抹零金额</text>
				<text style="color:#E84B4B">￥{{data.zero_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">付款人</text>
				<text>{{data.nickname}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">结算日期</text>
				<text>{{data.createdTime}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">备注</text>
				<text>{{data.remark}}</text>
			</view>
			<view class="list_box">
				<view class="title">账单列表</view>
				<view class="list" v-for="item in data.settlement_list">
					<view class="num">账单号：{{item.related_order_sn}}</view>
					<view class="btw">
						<text>应付金额：<text style="color:#e84b4b;">￥{{item.receive_money}}</text></text>
						<text>本次支付：<text style="color:#e84b4b;">￥{{item.collect_money}}</text></text>
					</view>
					<view class="btw">
						<text>已付金额：<text style="color:#e84b4b;">￥{{item.received_money}}</text></text>
						<text>抹零金额：<text style="color:#e84b4b;">￥{{item.zero_money}}</text></text>
					</view>
					<view class="btw">
						<text>未付金额：<text style="color:#e84b4b;">￥{{item.uncollected_money}}</text></text>
						<text>剩余未付：<text style="color:#e84b4b;">￥{{item.out_money}}</text></text>
					</view>
					<view class="note"><text style="font-weight: bold;">备注：{{item.remark}}</text></view>
				</view>
			</view>
		</view>
		<view v-if="type==2" class="export flex-center" @click="exportAction">导出</view>
	</view>
</template>

<script>
	import {$https} from '@/static/js/request.js';
	export default {
		data() {
			return {
				data:{},
				type:null,
			};
		},
		onLoad(options){
			console.log(options)
			this.type = options.type;	//1：在线支付，2：货到付款
			if(options.type==1){
				this.getData1(options.id)
			}else if(options.type ==2){
				this.getData2(options.id)
			}
		},
		methods:{
			getData1(id){
				$https('GET','settlementDetailOnline',{id:id},res=>{
					if(res.data.errcode==0){
						var list = res.data.data;
						var ms = Number(list.created_at+'000');
						var now = new Date();
						now.setTime(ms);
						var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+ ' ' + now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()
						list.createdTime = date;
						this.data = list;
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})
			},
			getData2(id){
				$https('GET','settlementDetailOffline',{id:id},res=>{
					if(res.data.errcode==0){
						var list = res.data.data;
						var ms = Number(list.created_at+'000');
						var now = new Date();
						now.setTime(ms);
						var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+ ' ' + now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()
						list.createdTime = date;
						this.data = list;
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})
			},
			exportAction(){
				if(this.type !=2){
					return;
				}
				let id = this.data.id;
				var xhr = new XMLHttpRequest();
				xhr.open('POST',getApp().globalData.rootUrl + '/partner/export_offlineSettle_info');
				xhr.responseType = 'blob';
				xhr.setRequestHeader('content-type','application/json');
				xhr.setRequestHeader('Authorization',uni.getStorageSync("copartner_token"));
				xhr.send(JSON.stringify({id}));
				xhr.onreadystatechange = function(){
				    if(xhr.readyState == 4 && xhr.status == 200){
						const link = document.createElement("a");
					      let blob = new Blob([xhr.response], {
					        type:
					          "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
					      });
					      link.style.display = "none";
					      link.href = URL.createObjectURL(blob);
					      link.download = '货到付款结算单';
					      document.body.appendChild(link);
					      link.click();
					      document.body.removeChild(link);
				    }
				}
				
			},
			back(){
				// #ifdef H5
					window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	.content{
		padding:20rpx 30rpx;
		font-size: 28rpx;
		>view{
			margin-bottom:30rpx;
			color:#9A9A9A;
			.prop{
				color:#191919;
			}
		}
		.title{
			font-size: 32rpx;
			color:#191919;
			font-weight: bold;
		}
		.list_box{
			color:#191919;
			font-size: 24rpx;
			border-top:1px solid #eee;
			.title{
				margin-top:30rpx;
				margin-bottom:20rpx;
			}
			.list{
				background:#fff;
				border-radius: 20rpx;
				padding:30rpx 40rpx;
				margin-bottom:20rpx;
				.num{
					font-size: 28rpx;
				}
				.btw{
					text{
						display: inline-block;
						width:50%;
					}
				}
				>view{
					margin-bottom:30rpx;
				}
			}
		}
	}
	.export{
		background: $dgreen;
		color:#fff;
		width:280rpx;
		padding:20rpx;
		border-radius:60rpx;
		position: fixed;
		bottom:40rpx;
		left:0;
		right:0;
		margin:auto;
	}
}

text{
	font-size: 26rpx;
}
</style>
